import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import Input from './components/input'
import List from './components/list'
function App(){
  let [todo,setTodo] = useState('');
  let [todoList,setTodoList] = useState([]);
  function change(e){
    setTodo(e.target.value)
  }
  function submit(){
    console.log(todo)
    setTodoList(todoList.concat({id:Math.random(),str:todo}))
    setTodo('')
  }
  function del(item){
    setTodoList(todoList.filter(val=>val.id!==item.id))
  }
  return <>
    <Input value={todo} onChange={change} onSubmit={submit}/>
    <List list={todoList} onDel={del}/>
  </>
}

ReactDOM.render(<App/>,document.getElementById('root'))